<template>
    <div class="apply">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="1.5rem" :show-message="false"
                :label-position="'top'" class="form clearfix">
            <div class="title">基本信息</div>
            <el-form-item label="姓名" prop="name">
                <el-input placeholder="请输入姓名" v-model="ruleForm.name"></el-input>
            </el-form-item>
            <el-form-item label="身份证号" prop="cardId">
                <el-input placeholder="请输入身份证号" v-model="ruleForm.cardId"></el-input>
            </el-form-item>
            <el-form-item label="手机号码（仅支持中国大陆手机号码）" prop="phone">
                <el-input placeholder="请输入手机号码" v-model="ruleForm.phone" type="number"></el-input>
            </el-form-item>
            <el-form-item label="本市居住地所在地区" prop="localArea">
                <group class="form-group">
                    <x-address title="" :value-text-align="'left'" v-model="ruleForm.localArea" :list="localAddress"
                            placeholder="请选择地址" ref="localArea"></x-address>
                </group>
            </el-form-item>
            <el-form-item label="本市居住地详址" prop="localAddress">
                <el-input placeholder="请输入住址" v-model="ruleForm.localAddress"></el-input>
            </el-form-item>

            <el-form-item label="当前是否在佳木斯【含佳木斯所有区县（市），下同】" prop="tripBlocal">
                <group class="form-group">
                    <checklist :options="whetherList" v-model="ruleForm.tripBlocal" class="checklist"
                            :max="1" @on-change="tripBlocalChange(ruleForm.tripBlocal)"></checklist>
                </group>
            </el-form-item>
            <el-form-item label="当前所在地区" prop="nowArea" class="form-item-top"
                        v-show="ruleForm.tripBlocal[0]&&ruleForm.tripBlocal[0]=='否'">
                <group class="form-group">
                    <x-address title="" :value-text-align="'left'" v-model="ruleForm.nowArea" :list="addressData"
                            placeholder="请选择地址" ref="nowArea"></x-address>
                </group>
            </el-form-item>
            <el-form-item label="当前现住地详址" prop="nowAddress" class="form-item-top"
                        v-show="ruleForm.tripBlocal[0]&&ruleForm.tripBlocal[0]=='否'">
                <el-input placeholder="请输入住址" v-model="ruleForm.nowAddress"></el-input>
            </el-form-item>

            <el-form-item :label="timeBefore() + '是否离开过佳木斯'" prop="tripBleaveCurrent">
                <group class="form-group">
                    <checklist :options="whetherList" v-model="ruleForm.tripBleaveCurrent" class="checklist"
                            :max="1" @on-change="tripChange(ruleForm.tripBleaveCurrent)"></checklist>
                </group>
            </el-form-item>
            <div v-show="ruleForm.tripBleaveCurrent[0] == '是'">
                <div class="tip">您{{timeBefore()}}分别去过哪里(请尽可能想尽罗列您分别到过的地方)</div>
                <div v-for="(list,index) in leaveAddressList" :key="index" class="leaveAddressList">
                    <div class="tip">地址({{index+1}})</div>
                    <el-form :model="list" :rules="leaveRules" :ref="'detailList'+index" label-width="1.5rem"
                            :show-message="false" :label-position="'top'" class="form">
                        <el-form-item label="地区" prop="area">
                            <group class="form-group">
                                <x-address title="" :value-text-align="'left'" v-model="list.area"
                                        :list="addressData" :ref="'detailArea'+index"
                                        placeholder="请选择地址"></x-address>
                            </group>
                        </el-form-item>
                        <el-form-item label="详细地址" prop="address" class="form-item-top">
                            <el-input placeholder="请输入详细地址" v-model="list.address"></el-input>
                        </el-form-item>
                    </el-form>
                </div>
                <div class="add-address">
                    <el-link :underline="false" type="primary" @click="addAddress()">+ 新增一条</el-link>
                </div>
            </div>
            <el-form-item label="当前健康状态（可多选）" prop="healthAbnormalDetail">
                <group class="form-group">
                    <checklist :options="healthList" v-model="ruleForm.healthAbnormalDetail" class="checklist"
                            :max="8"></checklist>
                </group>
            </el-form-item>
            <el-form-item :label="timeBefore() + '是否接触新冠肺炎确诊/疑似病人'" prop="healthTouch">
                <group class="form-group">
                    <checklist :options="whetherList" v-model="ruleForm.healthTouch" class="checklist"
                            :max="1"></checklist>
                </group>
            </el-form-item>
            <el-form-item label="本人郑重承诺" prop="promise">
                <group class="form-group">
                    <checklist :options="promiseList" v-model="ruleForm.promise" class="checklist" :max="2"></checklist>
                </group>
            </el-form-item>
        </el-form>
        <el-button type="primary" class="submit" @click="submitForm('ruleForm')">提交</el-button>
        <confirm v-model="showConfirm" confirm-text="确认提交" cancel-text="返回修改" class="apply-confirm"
                @on-confirm="submit()">
            <div class="prompt">提交后不能修改，是否继续</div>
            <div class="info" v-if="showConfirm">
                <div class="clearfix">
                    <div class="label">姓名：</div>
                    <div class="cont">{{ruleForm.name}}</div>
                </div>
                <div class="clearfix">
                    <div class="label">身份证号：</div>
                    <div class="cont">{{ruleForm.cardId}}</div>
                </div>
                <div class="clearfix">
                    <div class="label">手机号：</div>
                    <div class="cont">{{ruleForm.phone}}</div>
                </div>
                <div class="clearfix">
                    <div class="label">当前所在地区：</div>
                    <div class="cont">
                        <div v-if="ruleForm.tripBlocal[0]=='是'">{{$refs.localArea.nameValue}}</div>
                        <div v-else>{{$refs.nowArea.nameValue}}</div>
                    </div>
                </div>
                <div class="clearfix">
                    <div class="label">当前现住详址：</div>
                    <div class="cont">
                        <div v-if="ruleForm.tripBlocal[0]=='是'">{{ruleForm.localAddress}}</div>
                        <div v-else>{{ruleForm.nowAddress}}</div>
                    </div>
                </div>
                <div class="clearfix">
                    <div class="label">{{timeBefore()}}是否离开过佳木斯：</div>
                    <div class="cont">{{ruleForm.tripBleaveCurrent[0]}}</div>
                </div>
                <div class="clearfix">
                    <div class="label">{{timeBefore()}}分别去过哪里：</div>
                    <div class="cont">
                        <div>
                            <span v-for="(list,index) in tripPassAddr" :key="index">{{list.area+list.addr+(index >= tripPassAddr.length-1 ? '' : '，')}}</span>
                            <span v-if="tripPassAddr.length<1">-</span>
                        </div>
                    </div>
                </div>
            </div>
        </confirm>
    </div>
</template>

<script>
    import {Checklist, Selector, Group, XAddress, ChinaAddressV4Data, Confirm} from 'vux'
    import {mapGetters} from 'vuex'

    export default {
        data() {
            let _this = this,
                validateNowArea = (rule, value, callback) => {
                    if (_this.ruleForm.tripBlocal[0] && _this.ruleForm.tripBlocal[0] === '否' && !value[0]) {
                        callback(new Error('请选择当前所在地区'))
                    } else {
                        callback()
                    }
                },
                validateNowAddress = (rule, value, callback) => {
                    if (_this.ruleForm.tripBlocal[0] && _this.ruleForm.tripBlocal[0] === '否' && (!value && value !== 0)) {
                        callback(new Error('请填写当前现住地详址'))
                    } else {
                        callback()
                    }
                }
            return {
                ruleForm: {
                    name: '',
                    cardType: '1',
                    cardId: '',
                    // address: '',
                    healthAbnormalDetail: [], // 健康状况
                    tripBlocal: [], // 是否在佳木斯
                    nowArea: [], // 当前所在地区
                    nowAddress: '', // 当前现住地详址
                    localArea: [], // 本市区县街道
                    localAddress: '', // 本市居住详址
                    tripBleaveCurrent: [], // 是否离开过
                    phone: '',
                    promise: [], // 承诺
                    healthTouch: [] // 是否有接触
                },
                rules: {
                    name: [
                        {required: true, message: '请填写姓名', trigger: 'blur'}
                    ],
                    phone: [
                        {required: true, message: '请填写手机号', trigger: 'blur'}
                    ],
                    nowArea: [
                        {validator: validateNowArea, trigger: 'change'}
                    ],
                    nowAddress: [
                        // {required: true, message: '请填写当前现住地详址', trigger: 'blur'}
                        {validator: validateNowAddress, trigger: 'blur'}
                    ],
                    localArea: [
                        {required: true, message: '请选择本市居住地所在地区', trigger: 'change'}
                    ],
                    localAddress: [
                        {required: true, message: '请填写本市居住地详址', trigger: 'blur'}
                    ],
                    healthAbnormalDetail: [
                        {required: true, message: '请选择健康状况', trigger: 'change'}
                    ],
                    tripBlocal: [
                        {required: true, message: '请选择是否在佳木斯', trigger: 'change'}
                    ],
                    tripBleaveCurrent: [
                        {required: true, message: '请选择是否离开过佳木斯', trigger: 'change'}
                    ],
                    promise: [
                        {required: true, message: '请勾选承诺', trigger: 'change'}
                    ],
                    healthTouch: [
                        {required: true, message: '请选择接触史', trigger: 'change'}
                    ],
                    cardId: [
                        {required: true, message: '请填写身份证号', trigger: 'blur'}
                    ]
                },
                leaveForm: {
                    area: [], // 地区
                    address: '' // 详细地址
                },
                leaveRules: {
                    area: [
                        {required: true, message: '请选择途经地区', trigger: 'blur'}
                    ],
                    address: [
                        {required: true, message: '请填写途经地详址', trigger: 'blur'}
                    ]
                },
                leaveAddressList: [],
                sexList: [
                    {key: '0', value: '男'},
                    {key: '1', value: '女'}
                ],
                whetherList: [
                    {key: '是', value: '是'},
                    {key: '否', value: '否'}
                ],
                healthList: [
                    {key: '无异常', value: '无异常'},
                    {key: '发热（体温≥37.3℃）', value: '发热（体温≥37.3℃）'},
                    {key: '乏力', value: '乏力'},
                    {key: '干咳', value: '干咳'},
                    {key: '鼻塞', value: '鼻塞'},
                    {key: '流涕', value: '流涕'},
                    {key: '咽痛', value: '咽痛'},
                    {key: '腹泻', value: '腹泻'}
                ],
                promiseList: [
                    {key: '1', value: '为疫情防控，本人同意以上信息依法提交所在辖区疫情防控部门统筹管理。'},
                    {
                        key: '2',
                        value: '上述信息是我本人填写,本人对信息内容的真实性和完整性负责。如果信息有误或缺失,本人愿意' +
                            '承担相应法律责任。同时,本人保证遵守防疫管控的各项规定,配合并听从各项措施和要求。'
                    }
                ],
                cardTypeList: [
                    {key: '1', value: '身份证'}
                ],
                addressData: ChinaAddressV4Data,
                localAddress: [],
                showConfirm: false,
                tripPassAddr: []
            }
        },
        computed: {
            ...mapGetters([
                'user'
            ])
        },
        mounted() {
            this.getArea()
            if (this.user && this.user.phone) this.ruleForm.phone = this.user.phone
        },
        methods: {
            getArea() {
                this.$http.get('/index/region').then(result => {
                    if (result.success) this.localAddress = result.data
                })
            },
            trim(string) {
                return string.replace(/\s*/g, '')

            },
            validate(formName, callback) {
                this.$refs[formName].validate((valid, obj) => {
                    if (valid) {
                        if (callback) callback()
                    } else {
                        this.$vux.toast.text(obj[Object.keys(obj)[0]][0].message, 'middle')
                        return false
                    }
                })
            },
            submitForm(formName) {
                this.validate('ruleForm', () => {
                    if (this.ruleForm.promise.length < 2) {
                        this.$vux.toast.text('请勾选承诺声明', 'middle')
                    } else {
                        let verify = true, _this = this, tripPassAddr = []
                        if (this.leaveAddressList.length < 1) {
                            this.showConfirm = true
                            this.tripPassAddr = tripPassAddr
                            // this.submit(formName, tripPassAddr)
                        } else {
                            for (let i = 0; i < this.leaveAddressList.length; i++) {
                                _this.$refs['detailList' + i][0].validate((valid) => {
                                    if (verify) {
                                        if (valid) {
                                            verify = true
                                            tripPassAddr.push({
                                                addr: _this.leaveAddressList[i].address,
                                                area: _this.$refs['detailArea' + i][0].nameValue
                                            })
                                        } else {
                                            _this.$vux.toast.text('请填写完整信息', 'middle')
                                            verify = false
                                        }
                                    }
                                })
                            }
                            if (verify) {
                                this.showConfirm = true
                                this.tripPassAddr = tripPassAddr
                                // this.submit(formName, tripPassAddr)
                            }
                        }
                    }
                })
            },
            submit() {
                let _this = this,
                    params = {
                        cardId: this.ruleForm.cardId, // 证件号
                        cardType: this.ruleForm.cardType, // 证件类型
                        healthTouch: this.ruleForm.healthTouch[0], // 是否有接触
                        healthAbnormalDetail: this.ruleForm.healthAbnormalDetail, // 健康状况
                        name: this.ruleForm.name, // 姓名
                        phone: this.ruleForm.phone, // 手机号
                        tripBlocal: this.ruleForm.tripBlocal[0], // 当前是否在本市
                        tripBleaveCurrent: this.ruleForm.tripBleaveCurrent[0], // 最近14天是否离开过本市
                        tripBleaveLocal: this.ruleForm.tripBleaveCurrent[0], // 最近14天是否离开过本市
                        tripPassAddr: this.tripPassAddr, // 出行经过地市
                        promiseOfferInfo: this.ruleForm.promise.indexOf('1') > -1 ? 1 : 0, // 承诺提供信息
                        promiseRealness: this.ruleForm.promise.indexOf('2') > -1 ? 1 : 0, // 承诺信息真实
                        tripLocalAddr: {
                            area: this.$refs.localArea.nameValue, // 本市区县街道
                            addr: this.ruleForm.localAddress, // 本市居住详址
                            regionCity: this.ruleForm.localArea[0],
                            regionArea: this.ruleForm.localArea[1],
                            regionStreet: this.ruleForm.localArea[2]
                        }
                    }
                if (this.ruleForm.tripBlocal[0] === '否') {
                    params.tripAddr = {
                        area: this.$refs.nowArea.nameValue, // 当前所在省市区
                        addr: this.ruleForm.nowAddress // 当前所在详址
                    }
                }
                this.$http.post('/healthcode/apply', params).then(result => {
                    if (result.success) {
                        this.$router.replace('/code')
                        _this.$refs.ruleForm.resetFields()
                        for (let i = 0; i < _this.leaveAddressList.length; i++) {
                            _this.$refs['detailList' + i].resetFields()
                        }
                    }
                })
            },
            tripChange(value) {
                if (value[0] === '是') {
                    if (this.leaveAddressList.length < 1) this.addAddress()
                } else {
                    this.leaveAddressList = []
                }
            },
            addAddress() {
                this.leaveAddressList.push({
                    area: [],
                    address: ''
                })
            },
            tripBlocalChange(value) {
                this.ruleForm.nowArea = []
                this.ruleForm.nowAddress = ''
            },
            timeBefore() {
                let date = new Date()
                date -= 3600 * 24 * 14 * 1000
                return this.$filter.timeFormat(date, 'MM.DD') + '至今'
            }
        },
        components: {
            Checklist,
            Selector,
            Group,
            XAddress,
            Confirm
        }
    }
</script>

<style scoped lang="less">
    .apply {
        background-color: #f4f4f4;
        height: 100%;
        width: 100%;
        overflow-x: hidden;
        overflow-y: auto;
        padding-bottom: .86rem;

        .title {
            line-height: .76rem;
            padding: 0 .2rem;
            color: #999;

            &.mt {
                margin-top: -.15rem;
            }
        }

        .tip {
            line-height: .36rem;
            padding: 0 .2rem;
            color: #999;
            margin-bottom: .1rem;
            font-size: .24rem;

            &.mt {
                margin-top: -.05rem;
            }
        }

        .leaveAddressList {
            margin-bottom: .1rem;

            .el-form-item {
                &:last-child {
                    margin-bottom: 0;
                }
            }

            &:last-child {
                margin-bottom: 0;
            }
        }

        .add-address {
            margin-top: -.1rem;
            background-color: #fff;
            text-align: center;
            margin-bottom: .15rem;
            line-height: .68rem;
        }

        /deep/ .apply-confirm {
            .weui-dialog__bd:first-child {
                padding: .3rem .4rem 1rem;
            }

            .weui-dialog__ft {
                line-height: .8rem;
                font-size: .3rem;
            }

            .weui-dialog__btn_primary {
                color: #409eff;
            }

            .prompt {
                line-height: .68rem;
                font-size: .3rem;
                margin-bottom: .2rem;
                color: #ff0000;
            }

            .info {
                text-align: left;

                > div {
                    margin-bottom: .1rem;
                    font-size: .28rem;
                    line-height: .36rem;
                }

                .label {
                    float: left;
                }
            }
        }
    }

    .form {
        /deep/ .el-form-item {
            font-size: .28rem;
            /*border-bottom: 1px solid #ddd;*/
            background-color: #fff;
            margin-bottom: .15rem;
            padding: .1rem 0;

            .el-form-item__label {
                color: #333;
                padding: 0 0 0 .2rem;
                font-size: .28rem;
                line-height: .48rem;
                margin-bottom: .1rem;
            }

            .el-form-item__content {
                font-size: .28rem;
                line-height: .5rem;
            }

            .el-radio-group {
                padding: 0 .2rem;
                width: 100%;

                .el-radio {
                    width: 100%;
                    font-size: .28rem;
                    line-height: .48rem;
                    white-space: normal;
                    margin-right: 0;
                    margin-bottom: .1rem;
                }
            }

            .selector {
                padding: .1rem .2rem;
                line-height: .48rem;

                .weui-select {
                    padding-left: 0;
                    height: .48rem;
                    line-height: .48rem;
                    font-size: .28rem;
                }
            }

            .weui-cells_checkbox {
                .weui-icon-checked {
                    &:before {
                        font-size: .34rem;
                    }
                }

                .weui-check:checked + .vux-checklist-icon-checked {
                    &:before {
                        color: #409EFF;
                    }
                }
            }

            .el-input {
                font-size: .28rem;

                input {
                    padding: 0 .2rem;
                    border: 0 none;
                    height: .68rem;
                    line-height: .68rem;
                    border-radius: 2px;
                    /*border-color: rgba(255, 184, 203);*/
                }
            }

            .el-button {
                font-size: .28rem;
            }

            .form-group {
                .weui-cells {
                    &:before, &:after {
                        border: 0 none;
                    }

                    margin-top: 0;
                    font-size: .28rem;

                    .weui-cell {
                        padding: .15rem .2rem;

                        &:before {
                            border: 0 none;
                        }
                    }

                    .vux-cell-value {
                        color: inherit;
                    }
                }
            }

            &.form-item-top {
                margin-top: -.2rem;
                border-top: 1px solid #eee;
            }

            &.is-error {
                input {
                    /*background-color: rgba(255, 184, 203, .3);*/
                    /*border: 1px solid rgba(255, 184, 203);*/
                }
            }
        }
    }

    .submit {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: .88rem;
        border-radius: 0;
    }
</style>
